<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragment :: head(~{::title})">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>公共聊天室</title>
    <meta name="description" content="Cabe - Responsive Multi-purpose HTML5 Template">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- STYLESHEETS -->
    <link href="../static/css/Montserrat.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/owl.carousel.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="../static/css/owl.theme.default.min.css" type="text/css" media="all">

    <link rel="stylesheet" href="../static/css/themify-icons.css">

    <link rel="stylesheet" href="../static/css/main.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/my.css">
</head>

<body class="dark">
<div id="app">

    <!-- main wrapper -->
    <div class="main-wrapper">
        <!-- navigation -->
        <nav class="navigation">

        </nav>
        <!-- navigation -->
        <div class="right-content">
            <div class="left-sidebar">
                <div class="chat-header">
                    <div class="chat-header-user">
                        <figure class="avatar">
                            <a href="#" @click="show_info" class="profile-detail-bttn"><img  v-bind:src="url" class="rounded-circle" alt="image"></a>
                        </figure>
                        <div>
                            <h5 class="mt-0 mb-0" v-text="name"></h5>
                    </div>
                    <div class="chat-header-action nav-content">
                        <ul class="list-inline mb-1 mt-3">
                            <li class="list-inline-item mr-3"><a href="#" @click="logout"><i class="ti-lock"></i></a></li>
                        </ul>
                    </div>
                </div>
                <!--好友聊天-->
                <br>


                </div>
            </div>

            <!--			大厅-->
            <div class="chat-content mobile-active">
                <!-- chat header -->
                <div class="chat-header">
                    <div class="chat-header-user">
                        <figure class="avatar user-online">
                            <img src="../static/images/lobby.png" th:src="@{/images/lobby.png}" class="rounded-circle" alt="image">
                        </figure>
                        <div>
                            <h5 class="mt-2 mb-0">公共聊天室(当前在线人数:{{lobby_number}})</h5>
                        </div>
                    </div>
                    <div class="chat-header-action">
                        <ul class="list-inline mb-0 mt-2">
                            <li class="list-inline-item d-xl-none d-lg-none"><a href="#" @click="logout" class="bttn-box-round back-chat-div"><i class="ti-arrow-left"></i></a></li>
                        </ul>
                    </div>
                </div>
                <!-- chat header -->
                <!-- chat body -->
                <div id="lobby-chat-body" class="chat-body" style="overflow: hidden;outline: none;">
                    <div class="messages-content">

                        <div v-for="message in lobby_messages" :class="{'message-item':true,'outgoing-message':message.type==='out'}">
                            <div class="message-user">
                                <figure class="avatar">
                                    <img v-bind:src="message.url" alt="image">
                                </figure>
                                <div>
                                    <h5 v-text="message.name">Byrom Guittet</h5>
                                    <div class="time" v-text="message.time">01:35 PM</div>
                                </div>
                            </div>
                            <div class="message-wrap" style="padding: 15px;" v-text="message.content">I'm fine, how are you 😃</div>
                        </div>

                    </div>
                </div>
                <!-- chat body -->
                <!-- chat footer -->
                <div class="chat-footer">
                    <form onsubmit="return false">
                        <input type="text" v-model="lobby_text_typing" @keyup.enter="send_lobby_message" placeholder="...">
                        <button type="button" @click="send_lobby_message"><img src="../static/images/send.png" th:src="@{/images/send.png}" alt="send"></button>
                    </form>
                </div>
                <!-- chat footer -->
            </div>

        </div>

    </div>
    <!-- main wrapper -->

</div>



<!-- SCRIPTS -->
<!-- SCRIPTS -->
<th:block th:replace="_fragment :: javascript_for_visit">
    <script src="../static/js/plugin.js"></script>
    <script src="../static/js/visit.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <!--		<script src="../static/js/main.min.js"></script>-->
</th:block>
</body>

</html>
